<template>
    <div>
        <change-box></change-box>
        <ul>
            <li v-for="(item,index) in listFormat">
                <div style="color:red;">{{item.name}}</div>
                <div v-for="(img,index) in (item.imgs.slice(0,2))">
                    <p style="background:#ccc;color:#fff;">{{img}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import ChangeBox from "@/components/ChangeBox";
import API from '../api'
export default {
    name: "Home",
    components: {
        ChangeBox
    },
    filters: {
        imgFromat(value) {
            console.log(value)
            console.log('格式化')
            if (value.lenth > 3) {
                return value.slice(0, 3)
            }
        }
    },
    computed: {
        listFormat(value) {
            if (this.listData.length < 10) {
                this.newListData = this.listData.slice(0, 10)
            } else {
                this.newListData = this.listData.slice(0, 9)
            }
            return this.newListData
        },
        imgFromat(value) {
            console.log(value.listFormat)
            var del = value.listFormat
            var newImg = []
            for (var i in del) {
                if (del[i].imgs.length > 3) {
                    del[i].imgs.slice(0, 3)
                    console.log(del[i].imgs)
                    // newImg.push(del[i].imgs)
                }

            }
            console.log(newImg)
            console.log('格式化')

        }
    },
    data() {
        return {
            listData: [{
                    name: '张三',
                    imgs: ['王子', '小明', '小二', '小三', '王大爷']
                },
                {
                    name: '张三',
                    imgs: ['王子']
                },
                {
                    name: '张三',
                    imgs: ['王子']
                },
                {
                    name: '张三',
                    imgs: ['王子', '小明', '张无忆']
                }


            ],
            newListData: []
        }
    },
    mounted() {
   
        API.login.login({}).then(res=>{
            console.log('进入了这里')
            console.log(res)
        }).catch(err=>{
            console.log('err')
        })
        API.config({}).then(res=>{
            console.log(res)
        })
    }
};
</script>